/**
 * @Name:  EnterCodeText
 * @Author:
 * @Desc:  输入代码块
 * @Date: 2020-11-19 15:47:38
 */

import React, { Component } from "react";
import { Modal, Select } from "antd";
import styles from "./styles.module.less";
const typeList = [
  ".properties",
  "Apache",
  "config",
  "Bash",
  "C",
  "C#",
  "C++",
  "CSS ",
  "CoffeeScript",
  "Diff",
  "Go",
  "HTML, XML",
  "HTTP",
  "JSON",
  "Java",
  "JavaScript",
  "Kotlin",
  "Less",
  "Lua",
  "Makefile",
  "Markdown",
  "Nginx config",
  "Objective-C",
  "PHP",
  "PHP Template",
  "Perl",
  "Plain text",
  "Python",
  "Python REPL",
  "Ruby",
  "Rust",
  "SCSS",
  "SQL",
  "Shell Session",
  "Swift",
  "TOML, also INI",
  "TypeScript",
  "YAML"
];
class EnterCodeText extends Component {
  static defaultProps = {
    proVis: false, //显隐
    codeType: "", //代码类型
    typeChange: () => {}, //代码类型变化
    onOk: () => {}, //确定
    onCancel: () => {} //取消
  };
  state = {
    data: "" //输入的内容
  };
  /**
   * @name textChange
   * @description 内容变化
   */
  textChange = (data) => {
    this.setState({ data });
  };
  /**
   * @name topBar
   * @description 头部内容区
   */
  topBar = () => {
    const { typeChange, codeType } = this.props;
    return (
      <div>
        code
        <div style={{ float: "right", marginRight: "50px" }}>
          <Select value={codeType} onChange={(val) => typeChange(val)} style={{ width: "150px" }}>
            {typeList.map((item) => (
              <Select.Option key={item} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </div>
      </div>
    );
  };
  render() {
    const { proVis, onOk, onCancel } = this.props;
    const { data } = this.state;
    return (
      <div>
        <Modal visible={proVis} title={this.topBar()} onOk={() => onOk(data)} onCancel={onCancel}>
          <textarea rows="5" cols="20" value={data} className={styles.text_area} onChange={(e) => this.textChange(e.target.value)} />
        </Modal>
      </div>
    );
  }
}

export default EnterCodeText;
